修改邏輯

在appsettings.json-blog設定MarkDown=true後

在修改頁面可以看到MarkDown編輯器

使用技術

使用simplemde 跟showdown兩個套件
配合簡單，只需幾行Code就能完成MarkDown編輯器。
(感謝開源社群大大們"無私付出"，現在才能簡單使用)

原理

一.simplemde負責建立markdown編輯器，使用前需要先指定一個tag id給它
舉例:element: document.getElementById("指定tagId")
二.監聽onUpdate事件，當有人修改文章的時候，使用value()方法，取得編輯器markdown內容，並使用showdown渲染HTML，並保存到Model.Content的TextArea InnerHtml。
三.假如要使用像IT鐵人MarkDown格式，記得替showdown設定simpleLineBreaks: true，單回車就可以跨行。

    <form method="post" asp-controller="Home" asp-action="Index">
        <div asp-validation-summary="All"></div>
        <label asp-for="@Model.Title"></label>
        <input asp-for="@Model.Title" /><br />

        <textarea id="markdwonTextArea" asp-for="@Model.MarkDownContent"></textarea>
        <input type="submit" value="Save" title="Save the post" /><br /><br /><br />
        <textarea hidden id="markdwonTextAreaHiddenText" asp-for="@Model.Content" style="width:1000px; height: 200px"></textarea>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js"></script>
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        var converter = new showdown.Converter({ simpleLineBreaks: true, tables: true });
        var hiddenMarkDownTextArea = document.getElementById("markdwonTextAreaHiddenText");
        function reloadMarkDownData() {
            var markdown = simplemde.value();
            var html = converter.makeHtml(markdown);
            hiddenMarkDownTextArea.innerHTML = html;
        }
        var simplemde = new SimpleMDE({
            element: document.getElementById("markdwonTextArea"),
            status: ["autosave", "lines", "words", "cursor", {
                className: "CodeMirror-code",
                onUpdate: function (el) {
                    reloadMarkDownData();
                }
            }]
        });
    </script>

比較.NET Core MVC跟.NET MVC寫法不同之處

上列是.NET Core MVC寫法，其實也可以用以前熟悉.NET MVC寫法，把form tag實作內容改成:

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        @Html.LabelFor(m => m.Title);
        @Html.EditorFor(m => m.Title);
        @Html.TextAreaFor(m => m.MarkDownContent, new { id = "markdwonTextArea" });

        <input type="submit" value="Save" title="Save the post" /><br /><br /><br />

        @Html.TextAreaFor(m => m.Content, new { id = "markdwonTextAreaHiddenText", style = "width:1000px; height: 200px" })

    }

其中主要差異在net core新增支持Tag Helpers
可以查看官方文件定義Tag Helpers in ASP.NET Core | Microsoft Docs
假如要添加class、id等屬性，需要使用呼叫HTML Helper方法，開發方式對不熟C#的前端工程師是不友善的
舉例:

@Html.EditorFor(m => m.Title, new { @class = "xxx" });

現在TagHelper可以照著html模式編寫

<input asp-for="@Model.Title" class = "xxx" />

達到減少HTML跟C#之間的轉換邏輯

netMVC寫法測試連結:ITIronMan2019:MarkDownEditor | C# Online Compiler | .NET Fiddle

補充

因為是前端從MarkDown渲染HTML，所以會有XSS攻擊風險，如果有修改需求，需要特別留意。

舉例:
當留言板改為支持MarkDown時候，怪客偷偷在留言內容加入惡意JSScript，竊取其他使用者cookie等資料。

測試Model、Controller:

using System;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace HelloWorldMvcApp
{
	public class Post
	{
    	//略..
        [Display(Name ="標題")]
        public string Title { get; set; }

        [AllowHtml()]
        public string Content { get; set; }

        [AllowHtml()]
        public string MarkDownContent { get; set; }
        //略..
	}
}

using System;
using System.Web.Mvc;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        private static Post TestData = new Post()
        {
            Title = "MarkDown測試"
        };

        // GET: Home
        [HttpGet]
        public ActionResult Index()
        {
            return View(TestData);
        }

        [HttpPost]
        public ActionResult Index(Post post)
        {
            TestData = post;
            return View(post);
        }
    }
}

閱讀資料

Tag Helpers in ASP.NET Core | Microsoft Docs